<template>
  <div class="main">
    <div class="head" >
      <div><h3>您好 欢迎入住本酒店～～</h3></div>
    </div>

    <div class="content">
      <div class="left">
        <div class="l-top">
          <div class="bt">上报体温</div>
          <el-input-number
            size="big"
            precision="1"
            v-model="temp"
            :min="30"
            :max="44"
            label="体温"
          ></el-input-number>
          <el-button
            @click="setTemp"
            size="small"
            type="primary"
            icon="el-icon-upload"
            >提报</el-button
          >
        </div>
        <div class="l-bottom">
          <div class="bt">核酸检测记录 <el-button
                  @click="getDataList"
                  size="small"
                  type="primary"
                  icon="el-icon-upload">刷新
          </el-button></div>

          <div class="table">
              <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="userId" label="用户" width="80"></el-table-column>
                  <el-table-column prop="temp" label="温度"></el-table-column>
                  <el-table-column prop="hesuan" label="核酸结果"></el-table-column>
                  <el-table-column prop="tempTime" label="时间" width="200"></el-table-column>
              </el-table>
          </div>
          <div></div>
        </div>
      </div>
      <div class="right">
        <div class="bt">呼叫服务</div>
        <div class="">
          <span>服务类型：</span>
          <el-select
            style="margin-top: 20px"
            v-model="type"
            size="small"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="">
          <span>备注：</span>
          <el-input
            type="textarea"
            v-model="context"
            :rows="3"
            placeholder="请输入内容"
            style="width: 240px"
          >
          </el-input>
        </div>
        <div>
            <el-button @click="callServer" size="small" type="primary" icon="el-icon-upload">呼叫服务</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "guest",
    data() {
        return {
            idCard: "",
            type: "",
            context: "",
            temp: 36,
            tableData: [],
            options: [
                {
                    value: "点餐",
                    label: "点餐",
                }, {
                    value: "房卡补办",
                    label: "房卡补办",
                }, {
                    value: "温度控制",
                    label: "温度控制",
                }, {
                    value: "消毒服务",
                    label: "消毒服务",
                }, {
                    value: "其他服务",
                    label: "其他服务",
                },]
        };
    },
    props: ["id"],
    mounted() {
        this.idCard = this.$route.query.id;
    },
    methods: {
        async getDataList() {
            let result = await this.$API.myapi.select({
                userId: this.idCard
            });
            if (result.data.code == 20000) {
                this.$message({
                    message: "查询记录成功！",
                    type: "success",
                });
                this.tableData = result.data.data.data;


            }
            if (result.data.code == 40000) {
                this.$message({
                    message: "查询记录失败！",
                    type: "success",
                });
            }


        },
        async setTemp() {
            let result = await this.$API.myapi.setTemp({
                userId: this.idCard,
                temp: this.temp,
            });
            if (result.data.code == 20000) {
                this.$message({
                    message: "温度记录成功！",
                    type: "success",
                });
            }
            if (result.data.code == 40000) {
                this.$message({
                    message: "温度记录失败！",
                    type: "success",
                });
            }
        },async callServer() {
            let result = await this.$API.myapi.callServer({
                userId: this.idCard,
                type: this.type,
                context: this.context,
            });
            if (result.data.code == 20000) {
                this.$message({
                    message: "呼叫成功！",
                    type: "success",
                });
            }
            if (result.data.code == 40000) {
                this.$message({
                    message: "呼叫失败！",
                    type: "success",
                });
            }
        },
    },
};
</script>
<style scoped lang="scss">
.bt {
  font-size: 18px;
  color: rgb(6, 110, 247);
}
.main {
  display: flex;
  flex-direction: column;
  padding: 20px;
  .head {
    height: 50px;
    display: flex;
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    .left {
      width: 800px;
      height: 100%;

      .l-top {
        border: 1px solid black;
        border-radius: 8px;
        height: 160px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }
      .l-bottom {
        width: 100%;
        border: 1px solid black;
        border-radius: 8px;

        .bt {
          padding-top: 20px;
          padding-bottom: 20px;
        }
        .table {
          overflow-y: scroll;
          height: 350px;
        }
      }
    }
    .right {
      margin-left: 20px;
      width: 100%;
      height: 400px;
      border-radius: 8px;
      border: 1px solid black;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
